<template>
  <div class="dynamic-comp-wrapper" :style="{ '--dynamic-height': height }">
    <div class="header">一个header</div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer">一个footer</div>
  </div>
</template>
<script setup>
import { toRefs } from "vue";

const props = defineProps({
  height: {
    type: [String, Number],
  },
});

const { height } = toRefs(props);
</script>
<style scoped>
.dynamic-comp-wrapper {
  height: calc(var(--dynamic-height) * 1px);
  background-color: #222;

  border: 4px dashed darkorange;
  background: lightsteelblue;
  display: flex;
  flex-direction: column;

  .header {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    padding-left: 18px;
  }

  .content {
    padding: 8px;
    flex: 1;
  }

  .footer {
    height: 40px;
    line-height: 40px;
    text-align: right;
    background-color: #fff;
    padding-right: 18px;
  }
}
</style>
